<!DOCTYPE html>
<html>
  <head>
    <title>Preview Display</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico" />
    <style>
      html, body {
        padding: 0px;
        margin: 0px;
      }
    </style>

    <script src='custom/configs/htconfig.js'></script>
    <script src='libs/ht.js'></script>
    <script src='libs/ht-edgetype.js'></script>

    <script>
      function init() {
        dataModel = new ht.DataModel();
        graphView = new ht.graph.GraphView(dataModel);
        graphView.addToDOM();

        graphView.mi(function(e) {
          if (e.kind !== 'doubleClickData') return;

          var data = e.data;
          if (data.a('switch'))
            updateSwitchStatus(data, !data.a('closed'));
        });

        ht.Default.xhrLoad('previews/display.json', function(text) {
          var json = ht.Default.parse(text);
          dataModel.deserialize(json);

          graphView.fitContent(true);

          updatePoolDeep(dataModel.toDatas(function(d) { return d.getDisplayName() === 'pool'; }));
          updateDataPane(dataModel.toDatas(function(d) { return d.getDisplayName() === 'dataPane'; }));
        });

        var dlt = 5, max = 100000000;
        dataModel.addScheduleTask({
          interval: 50,
          action: function(data){
            if (data.a('switch')) {
              randomSwitch(data);
              return;
            }

            if (data instanceof ht.Shape) {
              if (!data.s('shape.dash')) return;

              var k = data.s('2d.movable') ? 1 : -1;
              var offset = data.s('shape.dash.offset') || 0;
              data.s('shape.dash.offset', (offset + k * dlt) % max);
              return;
            }
          }
        });
      }

      function randomSwitch(data) {
        var ran = Math.random() < 0.001;
        if (!ran) return;

        updateSwitchStatus(data, !data.a('closed'));
      }

      function updateSwitchStatus(data, v) {
        data.a('closed', v);

        v = !v;

        // 判断父亲
        var p = data.getParent();
        var pp = p.getParent();
        if (pp instanceof ht.Shape) {
          // 自身没有开关的情况下，判断所有孩子开关的状态
          var children = pp.getChildren();
          var switchs = children.toList(function(d) { return d.a('switch'); });
          if (switchs.length === 0) {
            var run = v;
            if (!run) {
              var shapes = children.toList(function(d) { return d instanceof ht.Shape; });
              shapes.each(function(s) {
                if (s === p) return;

                run = run || s.s('shape.dash');
              });
            }

            pp.s('shape.dash', run);
          }

          v = pp.s('shape.dash') && v;
        }
        p.s('shape.dash', v);

        // 判断孩子
        var shapes = [];
        p.getChildren().each(function(d) {
          if (!(d instanceof ht.Shape)) return;

          shapes.push(d);
        });

        if (shapes.length === 0) return;

        shapes.forEach(function(s) {
          s.getChildren().each(function(d) {
            if (!d.a('switch')) return;

            d.getParent().s('shape.dash', v && !d.a('closed'));
          })
        });
      }

      function updatePoolDeep(pools) {
        var deepDlt = 0.1, offsetDlt = 2;
        setInterval(function() {
          pools.each(function(p) {
            var flag = p.a('flag') || -1;
            var deep = p.getAnchorY() * 100;
            var v = deep + flag * deepDlt;
            if (v > 100) {
              v = 100;
              flag = -1;
            }
            else if (v < 0) {
              v = 0;
              flag = 1;
            }
            setPoolDeep(p, v);
            p.a('flag', flag);

            var offsetFlag = p.a('offsetFlag') || 1;
            var offset = (p.a('offsetX') || 0) + offsetDlt * offsetFlag;
            if (offset > 50) {
              offset = 50;
              offsetFlag = -1;
            }
            else if (offset < -50) {
              offset = -50;
              offsetFlag = 1;
            }
            p.a('offsetX', offset);
            p.a('offsetFlag', offsetFlag);
          });
        }, 50);
      }

      function setPoolDeep(pool, deep) {
        pool.getChildren().each(function(c) {
          if (c.getDisplayName() !== 'screen') return;

          c.a('deep', deep);
        });

        deep = deep * 0.01;
        pool.setAnchorY(deep);
        pool.s('clip.percentage', deep);
      }

      function updateDataPane(panes) {
        setInterval(function() {
          panes.each(function(p) {
            p.a('speed', Math.random() * 40 + 30);
          });
        }, 500);
      }

    </script>
  </head>
  <body onload='setTimeout(init, 300)'>
  </body>
</html>
